import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table, Space } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'
import { reqHospitalList } from '@api/hospital/hospitalList'
import {
  IhospitalListParams,
  IhospitalList,
  IhospitalListResItem,
} from '@api/hospital/model/hospitalListTypes'
const { Option } = Select

const columns: ColumnsType<IhospitalListResItem> = [
  {
    title: '序号',
    render: (text, records, index) => index + 1,
    align: 'center',
  },
  {
    title: '医院logo',
    render: (data) => {
      return (
        <img src={'data:image/png;base64,' + data.logoData} alt="" width="80" />
      )
    },
  },
  {
    title: '医院名称',
    dataIndex: 'hosname',
  },
  {
    title: '等级',
    render(data) {
      return data.param.hostypeString
    },
  },
  {
    title: '详细地址',
    render(data) {
      return data.param.fullAddress
    },
  },
  {
    title: '状态',
    render(data) {
      return data.status ? '已上线' : '未上线'
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
  },
  {
    title: '操作',

    render: (data) => (
      <Space size="middle">
        <Button type="primary">查看</Button>
        <Button type="primary">排班</Button>
        <Button type="primary">{data.status ? '下' : '上'}线</Button>
      </Space>
    ),
  },
]

export default function HospitalList() {
  const [total, setTotal] = useState(50)
  const [hospitalList, setHospitalList] = useState<IhospitalList>([])

  //分页相关的状态
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(2)
  // 组件挂载的时候,获取表格数据
  useEffect(() => {
    getHospitalList({ page: 1, limit: 2 })
  }, [])

  // 获取表格数据的方法
  async function getHospitalList({ page, limit }: IhospitalListParams) {
    // 封装的axios发送请求的方法
    const result = await reqHospitalList({ page, limit })
    // console.log(result)
    setTotal(result.totalElements)
    setHospitalList(result.content)
  }
  return (
    <Card>
      <Form layout="inline">
        <Form.Item name="provinceCode">
          <Select style={{ width: 200 }} placeholder="请选择省">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Form.Item>
        <Form.Item name="cityCode">
          <Select style={{ width: 200 }} placeholder="请选择市">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Form.Item>
        <Form.Item name="districtCode">
          <Select style={{ width: 200 }} placeholder="请选择区">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Form.Item>
        <Form.Item name="hosname">
          <Input placeholder="医院名称"></Input>
        </Form.Item>
        <Form.Item name="hoscode">
          <Input placeholder="医院编码"></Input>
        </Form.Item>
        <Form.Item name="hostype">
          <Select style={{ width: 200, marginTop: 10 }} placeholder="医院类型">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
        </Form.Item>
        <Form.Item name="status">
          <Select style={{ width: 200, marginTop: 10 }} placeholder="医院状态">
            <Option value={0}>未上线</Option>
            <Option value={1}>已上线</Option>
          </Select>
        </Form.Item>
        <Form.Item>
          <Button
            htmlType="submit"
            type="primary"
            style={{ marginTop: 10 }}
            icon={<SearchOutlined />}
          >
            查询
          </Button>
        </Form.Item>
        <Form.Item>
          <Button style={{ marginTop: 10 }}>清空</Button>
        </Form.Item>
      </Form>
      <Table
        rowKey={'id'}
        columns={columns}
        dataSource={hospitalList}
        style={{ marginTop: 20 }}
        bordered
        pagination={{
          total,
          current: page,
          pageSize,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['2', '5', '10'],
        }}
      />
    </Card>
  )
}
